<template>
  <div class="app-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="statistics-cards">
      <el-col :span="12">
        <el-card shadow="hover" class="statistics-card">
          <div class="card-header">
            <span class="card-title">总调用次数</span>
            <el-tag type="success">{{ totalCalls }}</el-tag>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="statistics-card">
          <div class="card-header">
            <span class="card-title">平均响应时间</span>
            <el-tag type="warning">{{ (avgResponseTime || 0).toFixed(2) }}ms</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header">
            <span>API路径调用统计</span>
          </div>
          <div class="chart-container">
            <div v-for="(item, index) in pathStats" :key="index" class="path-stat-item">
              <span class="path-name">{{ item.path }}</span>
              <el-progress 
                :percentage="((item.count / (totalCalls || 1)) * 100).toFixed(1)" 
                :format="format => `${item.count}次`"
                :color="getProgressColor(index)"
              />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header">
            <span>状态码分布</span>
          </div>
          <div class="chart-container">
            <div v-for="(item, index) in statusStats" :key="index" class="status-stat-item">
              <el-tag :type="getStatusType(item.status_code)">
                {{ item.status_code }}
              </el-tag>
              <span class="status-count">{{ item.count }}次</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 用户统计和时间统计 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header">
            <span>用户调用统计</span>
          </div>
          <div class="chart-container">
            <div v-for="(item, index) in userStats" :key="index" class="user-stat-item">
              <span class="user-name">{{ item.user__username || '匿名用户' }}</span>
              <el-progress 
                :percentage="((item.count / (totalCalls || 1)) * 100).toFixed(1)" 
                :format="format => `${item.count}次`"
                :color="getProgressColor(index)"
              />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header">
            <span>时间分布统计</span>
          </div>
          <div class="chart-container">
            <div v-for="(item, index) in timeStats" :key="index" class="time-stat-item">
              <span class="time-hour">{{ item.hour }}时</span>
              <el-progress 
                :percentage="((item.count / (totalCalls || 1)) * 100).toFixed(1)" 
                :format="format => `${item.count}次`"
                :color="getProgressColor(index)"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getApiStatistics } from '@/api/opration'

export default {
  name: 'ApiStatistics',
  data() {
    return {
      totalCalls: 0,
      avgResponseTime: 0,
      pathStats: [],
      statusStats: [],
      userStats: [],
      timeStats: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        const response = await getApiStatistics()
        const { total_calls, avg_response_time, path_stats, status_stats, user_stats, time_stats } = response
        this.totalCalls = total_calls
        this.avgResponseTime = avg_response_time
        this.pathStats = path_stats
        this.statusStats = status_stats
        this.userStats = user_stats
        this.timeStats = time_stats
      } catch (error) {
        console.error('获取API统计数据失败:', error)
        this.$message.error('获取API统计数据失败')
      }
    },
    getProgressColor(index) {
      const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
      return colors[index % colors.length]
    },
    getStatusType(statusCode) {
      if (statusCode >= 200 && statusCode < 300) return 'success'
      if (statusCode >= 300 && statusCode < 400) return 'warning'
      if (statusCode >= 400 && statusCode < 500) return 'danger'
      if (statusCode >= 500) return 'info'
      return 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);

  .statistics-cards {
    margin-bottom: 20px;

    .statistics-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;

        .card-title {
          font-size: 16px;
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }

  .chart-row {
    margin-bottom: 20px;

    .chart-card {
      .chart-container {
        padding: 10px;

        .path-stat-item,
        .user-stat-item,
        .time-stat-item {
          margin-bottom: 15px;

          .path-name,
          .user-name,
          .time-hour {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
            color: #606266;
          }
        }

        .status-stat-item {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .status-count {
            margin-left: 10px;
            color: #606266;
          }
        }
      }
    }
  }
}
</style> 